<template>
  <div class="marker-dialog-no-mask">
    <div
      class="marker-dialog"
      ref="dialogRef"
      :style="dialogStyle"
      @mousedown.stop
    >
      <div class="marker-dialog-header" @mousedown="onDragStart">
        <span>添加标记</span>
        <button class="close-btn" @click="$emit('close')">×</button>
      </div>
      <div class="marker-dialog-body">

        <div class="group-row">
          <span class="group-label">单个点类：</span>
          <div class="group-btns">
            <button class="type-btn" @click="startDrawGraphic">绘制弹框</button>

          </div>
        </div>

        <div class="group-row">
          <span class="group-label">单个点类：</span>
          <div class="group-btns">
            <button class="type-btn" @click="drawPoint">点</button>
            <button class="type-btn" @click="drawLabel">文字</button>
            <button class="type-btn" @click="drawMarker">图标点</button>
            <button class="type-btn" @click="onClickStartDarw">小模型</button>
            <button class="type-btn" @click="drawSwallowtailArrow">燕尾箭头</button>
            <button class="type-btn" @click="drawAttackArrow">攻击箭头</button>
            <button class="type-btn" @click="drawPincerArrow">钳击箭头</button>
          </div>
        </div>
        <div class="group-row">
          <span class="group-label">二维空间：</span>
          <div class="group-btns">
            <button class="type-btn" @click="drawPolyline(false)">线</button>
            <button class="type-btn" @click="drawBrushLine(false)">自由线</button>
            <button class="type-btn" @click="drawPolygon(false)">面</button>
            <button class="type-btn" @click="drawEllipse(false)">圆</button>
            <button class="type-btn" @click="drawRectangle(false)">矩形</button>
            <button class="type-btn" @click="draPlane">平面</button>
            <button class="type-btn" @click="drawCurve(false)">曲线</button>
            <button class="type-btn" @click="drawCorridor(false)">走廊</button>
          </div>
        </div>
        <div class="group-row">
          <span class="group-label">二维贴地：</span>
          <div class="group-btns">
            <button class="type-btn" @click="drawPolyline(true)">线</button>
            <button class="type-btn" @click="drawBrushLine(true)">自由线</button>
            <button class="type-btn" @click="drawPolygon(true)">面</button>
            <button class="type-btn" @click="drawEllipse(true)">圆</button>
            <button class="type-btn" @click="drawCurve(true)">曲线</button>
            <button class="type-btn" @click="drawCorridor(true)">走廊</button>
            <button class="type-btn" @click="drawRectangle(true)">矩形</button>
          </div>
        </div>
        <div class="group-row">
          <span class="group-label">三维空间：</span>
          <div class="group-btns">
            <button class="type-btn" @click="drawEllipsoid">球</button>
            <button class="type-btn" @click="draWall(false)">墙</button>
            <button class="type-btn" @click="drawBox">盒子</button>
            <button class="type-btn" @click="drawExtrudedCircle">圆柱</button>
            <button class="type-btn" @click="drawCylinder">圆锥</button>
            <button class="type-btn" @click="draWall(true)">闭合墙</button>
            <button class="type-btn" @click="drawExtrudedPolygon">面立体</button>
            <button class="type-btn" @click="drawExtrudedRectangle">矩形立体</button>
          </div>
        </div>

      </div>
      <div class="marker-dialog-footer">
        <button class="action-btn cancel" @click="$emit('close')">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineEmits, ref, reactive, computed } from 'vue';
import * as mapWork from "@/pages/newMap/index"

const dialogRef = ref<HTMLElement | null>(null)
const dialogPos = reactive({ x: 0, y: 0, dragging: false, offsetX: 0, offsetY: 0 })
const dialogStyle = computed(() => ({
  left: dialogPos.x + 'px',
  top: dialogPos.y + 'px',
  position: 'fixed',
  zIndex: 10001
}))

function onDragStart(e: MouseEvent) {
  if (!dialogRef.value) return
  dialogPos.dragging = true
  // 鼠标点到弹框左上角的偏移
  dialogPos.offsetX = e.clientX - dialogRef.value.getBoundingClientRect().left
  dialogPos.offsetY = e.clientY - dialogRef.value.getBoundingClientRect().top
  document.addEventListener('mousemove', onDragging)
  document.addEventListener('mouseup', onDragEnd)
}
function onDragging(e: MouseEvent) {
  if (!dialogPos.dragging) return
  dialogPos.x = e.clientX - dialogPos.offsetX
  dialogPos.y = e.clientY - dialogPos.offsetY
}
function onDragEnd() {
  dialogPos.dragging = false
  document.removeEventListener('mousemove', onDragging)
  document.removeEventListener('mouseup', onDragEnd)
}

function startDrawGraphic() {
  mapWork.startDrawGraphic()
  emit('close')
}

function drawPoint() {
  mapWork.drawPoint()
  emit('close')
}

function drawLabel() {
  mapWork.drawLabel()
  emit('close')
}

function drawMarker() {
  mapWork.drawMarker()
  emit('close')
}

function onClickStartDarw() {
  mapWork.startDrawModel()
  emit('close')
}

function drawPolyline(clampToGround: boolean) {
  mapWork.drawPolyline(clampToGround)
  emit('close')
}

function drawBrushLine(clampToGround: boolean) {
  mapWork.drawBrushLine(clampToGround)
  emit('close')
}

function drawPolygon(clampToGround: boolean) {
  mapWork.drawPolygon(clampToGround)
  emit('close')
}


function drawEllipse(clampToGround: boolean) {
  mapWork.drawEllipse(clampToGround)
  emit('close')

}

function drawRectangle(clampToGround: boolean) {
  mapWork.drawRectangle(clampToGround)
  emit('close')

}

function draPlane() {
  mapWork.draPlane()
  emit('close')

}

function draWall(closure: boolean) {
  mapWork.draWall(closure)
  emit('close')

}

function drawBox() {
  mapWork.drawBox()
  emit('close')

}

function drawCylinder() {
  mapWork.drawCylinder()
  emit('close')

}

function drawEllipsoid() {
  mapWork.drawEllipsoid()
  emit('close')

}

function drawExtrudedPolygon() {
  mapWork.drawExtrudedPolygon()
}

function drawExtrudedRectangle() {
  mapWork.drawExtrudedRectangle()
  emit('close')

}

function drawExtrudedCircle() {
  mapWork.drawExtrudedCircle()
  emit('close')

}

function drawSwallowtailArrow() {
  mapWork.drawSwallowtailArrow()
  emit('close')
}

function drawAttackArrow() {
  mapWork.drawAttackArrow()
  emit('close')
}

function drawPincerArrow() {
  mapWork.drawPincerArrow()
  emit('close')
}

const emit = defineEmits(['close']);
</script>

<style scoped>
.marker-dialog-no-mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.marker-dialog {
  background: linear-gradient(135deg, #1a233a 80%, #2e8fff 100%);
  border-radius: 16px;
  box-shadow: 0 0 32px #2e8fff88, 0 2px 8px #000a;
  min-width: 340px;
  max-width: 90vw;
  color: #eaf6ff;
  border: 1.5px solid #2e8fff;
  animation: dialogIn 0.3s cubic-bezier(.68, -0.55, .27, 1.55);
  pointer-events: auto;
  position: fixed;
  left: 0;
  top: 0;
}

@keyframes dialogIn {
  0% {
    transform: scale(0.8) translateY(40px);
    opacity: 0;
  }

  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.marker-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px 10px 24px;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  border-bottom: 1px solid #2e8fff44;
}

.close-btn {
  background: none;
  border: none;
  color: #2e8fff;
  font-size: 26px;
  cursor: pointer;
  transition: color 0.2s;
}

.close-btn:hover {
  color: #ff4b7d;
}

.marker-dialog-body {
  padding: 18px 24px 10px 24px;
}

.group-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

.group-label {
  min-width: 80px;
  color: #7ecbff;
  font-size: 15px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: 1px;
}

.group-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 8px;
}

.type-btn {
  background: #2e8fff;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 18px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 6px;
  box-shadow: 0 2px 8px #2e8fff44;
  transition: background 0.2s, color 0.2s;
}

.type-btn:hover {
  background: #ff4b7d;
  color: #fff;
}

.marker-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding: 10px 24px 18px 24px;
  border-top: 1px solid #2e8fff44;
}

.action-btn.cancel {
  background: #16203a;
  color: #7ecbff;
  border: none;
  border-radius: 6px;
  padding: 8px 24px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 8px #2e8fff44;
  transition: background 0.2s, color 0.2s;
}

.action-btn.cancel:hover {
  background: #ff4b7d;
  color: #fff;
}
</style>